<template>
<div>
  <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad">
  <div class="home">
    <movie-item v-for="(item,index) of movies" :key="index" :movie="item" @jump="onjump"></movie-item>
  </div>
  </van-list>
  </div>
</template>
<script>
import movieItem from "../components/movieitem";
import axios from "axios-jsonp-pro";
  export default {
   name:"home",
     data(){
       return{
         movies:[],
         loading: false,
         finished: false,
         total:""
       };
     },
     components:{
       movieItem
     },
    //  mounted(){
    //    var url ="https://douban.uieee.com/v2/movie/coming_soon";
    //    axios.jsonp(url).then(res=>{
    //      this.handleData(res);
    //    })
    //  },
     methods:{
       onjump(id){
         this.$router.push('/about/'+id);
       },
       handleData(res){
         var subjects=res.subjects;
         var movies=[];
         subjects.forEach(item=>{
           var temp={
             id:item.id,
             imageUrl:item.images.small,
             title:item.title.slice(0,6)
           }
           movies.push(temp);
         });
         this.total=res.total;
         this.movies=[...this.movies,...movies];
       },
       onLoad(){
          console.log(1);
         setTimeout(()=>{
         var length=this.movies.length;
         var url=`https://douban.uieee.com/v2/movie/coming_soon?start=${length}&count=20`;
        //  if(length<=this.total){
            axios.jsonp(url).then(res=>{
           this.handleData(res);
            this.loading=false;
            if(length>=this.total){
              this.finished=true;
            }
         });
        //  }
         },500); 
       }
     }
}
</script>
<style lang="scss" scoped>
  .home{
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
  }
</style>
